<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function f1() {
            let s = setInterval(function () {
                let image = document.getElementById("image");
                image.style.left = parseFloat(image.style.left) + 2 + "%";
            }, 100);
            setTimeout(function () {
                clearInterval(s)
            }, 4900)
        }

        function f2() {
            let s = setInterval(function () {
                let d2 = document.getElementById("d2");
                d2.style.width = parseFloat(d2.style.width) + 2 + "%";
            }, 100);

            setTimeout(function () {
                clearInterval(s)
            }, 4900);
        }

        window.onload = function () {
            setInterval(function () {
                let date = new Date();
                document.getElementById("s").innerHTML = date.getFullYear() + "年" + fn(date.getMonth() + 1) + "月" + fn(date.getDate()) + "日 " + fn(date.getHours()) + ":" + fn(date.getMinutes()) + ":" + fn(date.getSeconds());
            }, 100);
        }

        function fn(s) {
            s = "0" + s;
            return s.substring(s.length - 2);
        }
    </script>
</head>
<body>
<img onclick="f1()" id="image" style="position: relative;left: 0px;" src="../images/heihei.gif" alt="图片加载失败">
<hr>
<div id="d1" style="width: 1000px;height: 50px;border: 1px solid black;">
    <div id="d2" style="height: 100%;width: 2%;background-color: red;" onclick="f2()"></div>
</div>
<hr>
<!-- 此处打印日期,格式为yyyy年MM月dd日 HH:mm:ss,且时间必须走动 -->
<span id="s"></span>
</body>
</html>